/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import React, {Component} from 'react';
import {Platform,TouchableOpacity,Text,Image} from 'react-native';
import {Button} from '@ant-design/react-native'
import Register from './js/page/register/register'
import Login from './js/page/login/login'
import codePush from "react-native-code-push";
import {
  createStackNavigator ,
  createAppContainer,
  createBottomTabNavigator,
  createDrawerNavigator
} from 'react-navigation';
import Favorite from './js/page/Favorite/Favorite'
import My from './js/page/My/My'
import Popular from './js/page/Popular/Popular'
import Trending from './js/page/Trending/Trending'
import FontAwesome  from 'react-native-vector-icons/FontAwesome'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import List from './js/page/list/List'
import List2 from './js/page/list/List2'

//import {Navigator} from 'react-native-deprecated-custom-components'
const codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//type Props = {};
 class App extends Component {
   constructor(props){
     super(props);
     //const { navigate } = this.props.navigation;
   }
  componentDidMount(){
    codePush.sync({
      updateDialog: true,
      installMode: codePush.InstallMode.IMMEDIATE,
      mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
      //deploymentKey为刚才生成的,打包哪个平台的App就使用哪个Key,这里用IOS的打包测试
      deploymentKey: '3LT7IXMJxJLegRHatQExmNlZ2dTA33737500-caff-41e8-b562-26ed8064a2af',
      });
  }
  render() {
    //const { navigate } = this.props.navigation;
    console.log(this.props)
    return (
        <AppRouter></AppRouter>
    );
  }
}
const SimpleDrawerNavigator = createDrawerNavigator({
  page5: {screen: Popular,
    navigationOptions: {
      drawerLabel: '123',
      drawerIcon: ({tintColor}) => (
          <MaterialIcons name="drafts" size={24} style={{color: tintColor}}/>
      ),
  }

  },
  page6: {screen: Favorite,
    navigationOptions:{
      drawerLabel:'Favorite',
      drawerIcon: ({tintColor}) => (
        <MaterialIcons name="drafts" size={24} style={{color: tintColor}}/>
    ),
    }
  },
  page7: {screen: Trending,
    navigationOptions:{
      drawerLabel:'Trending',
      drawerIcon: ({tintColor}) => (
        <MaterialIcons name="drafts" size={24} style={{color: tintColor}}/>
    ),
    }
  },
  page8: {screen: My,
    navigationOptions:{
      drawerLabel:'My',
      drawerIcon: ({tintColor}) => (
        <MaterialIcons name="drafts" size={24} style={{color: tintColor}}/>
    ),
    }
  }
},{
   initialRouteName: 'page5', 
});
const SimpleTopNavigator = createBottomTabNavigator({
 
  page1: {screen: Popular,
    navigationOptions: {
      tabBarLabel: '最热', // tabBar显示的文字
      tabBarIcon: ({tintColor}) => ( // tabBar显示的图标
          // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <MaterialIcons 
              name={'accessibility'}
              size={30}
              color={tintColor}
          />
      ),
     
  }
  },
  page2: {screen: Favorite,
    navigationOptions: {
      tabBarLabel: '最热', // tabBar显示的文字
      tabBarIcon: ({tintColor}) => ( // tabBar显示的图标
          // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <FontAwesome 
              name={'wpforms'}
              size={30}
              color={tintColor}
          />
      )
  }},
  page3: {screen: Trending,
    navigationOptions: {
      tabBarLabel: '最热', // tabBar显示的文字
      tabBarIcon: ({tintColor}) => ( // tabBar显示的图标
          // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <FontAwesome 
              name={'wpforms'}
              size={30}
              color={tintColor}
          />
      )
  }},
  page4: {screen: My,
    navigationOptions: {
      tabBarLabel: '最热', // tabBar显示的文字
      tabBarIcon: ({tintColor}) => ( // tabBar显示的图标
          // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <FontAwesome 
              name={'wpforms'}
              size={30}
              color={tintColor}
          />
      )
  }}
},{
   initialRouteName: 'page1',
   tabBarPosition:'bottom',
   tabBarOptions:{
      activeTintColor:'#e91e61'
   },
   
});
const SimpleAppNavigator = createStackNavigator ({
  Drawer:{
    screen:SimpleDrawerNavigator,
  },
  Main:{
    screen:SimpleTopNavigator,
    navigationOptions:{
      headerTitle:'主页',
      headerLeft:(
        <TouchableOpacity >
          <Image source={require('./res/images/touxiang.jpg')} style={{width:35,height:35,borderRadius:50,marginLeft:10}}></Image>
        </TouchableOpacity>
      )
    }
  },
  Login: {screen: Login,
    navigationOptions:{
      title:'登录',
      //右边
      headerRight:(
        <TouchableOpacity
          style={{backgroundColor: '#fff'}}
        >
           <Text style={{color:'#000',fontSize:20,fontWeight:'bold',marginRight:10}}>右边</Text>
        </TouchableOpacity>
      )
    }
  }, // 登录页
  Register:{screen:Register,
    navigationOptions:({navigation})=>({
      // 获得传递过来的参数
    title:`${navigation.state.params.title}`
  })},
  List:{
    screen:List,
  },
  List2:{
    screen:List2,
  }
},
{
  initialRouteName: 'Login',
  headerMode: 'screen'
});


const AppRouter = createAppContainer(SimpleTopNavigator);
export default App;
